<template>
  <div class="container" id="pay" v-if="tradeInfo">
    <!-- 导航栏 -->
    <van-nav-bar title="网易严选" left-text="返回" left-arrow>
      <template #left>
        <van-icon name="wap-home-o" size="32" color="black" @click="toCart" />
      </template>

      <template #right>
        <van-space :size="15">
          <van-icon name="search" size="32" color="black" @click="toSearch" />
          <van-icon name="cart-o" size="32" color="black" @click="toCart" />
        </van-space>
      </template>
    </van-nav-bar>

    <!-- 收获人信息 -->
    <!-- <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      :show-add-button="false"
      @add="onAdd"
      @edit="onEdit"
    /> -->

    <div class="addressinfo">
      <div class="addressinfo_left">
        <input type="text" v-model="consignee" placeholder="姓名" />
        <span>默认</span>
      </div>
      <div class="addressinfo_right">
        <input type="text" v-model="consigneeTel" placeholder="电话" />
        <input type="text" v-model="deliveryAddress" placeholder="地址" />
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="coupon">
      <ul>
        <li>
          <div class="coupon_left">
            <p>暂无可用优惠券</p>
            <p>0张</p>
          </div>
          <van-icon name="arrow" />
        </li>
        <li>
          <input type="checkbox" />
          <p>礼品卡余额：￥0.00</p>
          <van-icon name="arrow" />
        </li>
        <li>
          <input type="checkbox" />
          <p>余额：￥0.00</p>
        </li>
      </ul>
    </div>
    <div class="costlist">
      <ul>
        <li>
          <p>商品合计</p>
          <P>￥{{ tradeInfo.totalAmount }}</P>
        </li>
        <li>描述： <input type="text" v-model="orderComment" /></li>
        <li>
          <p>邮费</p>
          <P>￥0.00</P>
        </li>
        <li>
          <p>活动优惠</p>
          <P>￥0.00</P>
        </li>
        <li>
          <p>优惠券</p>
          <P>￥0.00</P>
        </li>
        <li>
          <input type="checkbox" name="" id="" />
          <p>我要开发票</p>
          <van-icon name="arrow" />
        </li>
      </ul>
    </div>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="tradeInfo.totalAmount * 100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { reqSubmitOrder, reqTrade } from '@/api/pay'
import { showFailToast } from 'vant'
import 'vant/es/toast/style'
const checked = ref(true)

const router = useRouter()

// 点击导航栏返回购物车
const toCart = () => {
  router.push('/cart')
}

// 点击导航栏放大镜按钮
const toSearch = () => {
  router.push('/search')
}

// 获取交易页信息
const tradeInfo = ref()
// 评论
const orderComment = ref('')

// 姓名
const consignee = ref()

// 电话
const consigneeTel = ref()

// 地址
const deliveryAddress = ref()

// 获取交易页信息接口
const getReqTrade = async () => {
  const res = await reqTrade()
  // console.log(res)

  if (res.code === 200) {
    // console.log(res)
    tradeInfo.value = res.data
  }
}

// 提交订单
const onSubmit = async () => {
  const { tradeNo } = tradeInfo.value
  const { detailArrayList } = tradeInfo.value

  // 组织成后端需要使用的数据格式
  const params = {
    tradeNo,
    consignee: consignee.value,
    consigneeTel: consigneeTel.value,
    deliveryAddress: consigneeTel.value,
    paymentWay: 'ONLINE',
    orderComment: orderComment.value,
    orderDetailList: detailArrayList
  }
  console.log(consignee.value)

  const res = await reqSubmitOrder(params)
  if (res.code === 200) {
    router.push(`/paying?orderId=${res.data}`)
  }

  // console.log(params)
}

onMounted(() => {
  getReqTrade()
})
</script>

<script lang="ts">
export default {
  name: 'VPay'
}
</script>

<style lang="scss" scoped>
.van-address-list {
  height: 100px;
  padding: 0px;
}

.container {
  height: 700px;
  background-color: #f4f4f4;
}
::v-deep .van-nav-bar__title {
  font-size: 20px;
}

.addressinfo {
  background-color: #ffffff;
  overflow: hidden;
  padding: 10px;
  font-size: 14px;
  input {
    width: 60px;
    border: none;
  }
  .addressinfo_left {
    width: 60px;
    float: left;
    p {
      font-size: 14px;
    }
    span {
      font-size: 14px;
      text-align: center;
      color: #dd1a21;
      border-radius: 3px;
      border: 2px solid #dd1a21;
    }
  }
  .addressinfo_right {
    width: 257px;
    float: left;
    input {
      width: 240px;
      border: none;
    }
    p {
      font-size: 16px;
    }
  }
  i {
    float: right;
    color: #ccc;
    font-size: 18px;
  }
}
.coupon {
  margin-top: 10px;
  background-color: #ffffff;
  height: 200px;
  padding-left: 10px;
  li {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    &:last-child {
      border: none;
    }
    input {
      float: left;
    }
    p {
      font-size: 16px;
      float: left;
      color: #ccc;
    }
    .coupon_left {
      p {
        float: left;
        color: #666;
        font-size: 16px;
        &:last-child {
          float: left;
        }
      }
    }
    i {
      float: right;
    }
  }
}
.costlist {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 10px;
  li {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    &:last-child {
      border: none;
      input {
        float: left;
      }
      i {
        float: right;
      }
    }
    p {
      float: left;
      font-size: 16px;
      color: #333;
      &:last-child {
        float: right;
      }
    }
  }
}
</style>
